<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>07-dom操作样式</title>
    <style>
        #p1{ background-color: beige;}
        .mp {
            color: green
        }

        .mpp {
            background-color: lightgray;
        }
        .mppp{
            font-size: 50px;
            color: orange;
        }
    </style>
</head>
<body>

<p id="p1">1. 设置一个css样式</p>
<p id="p2" class = mpp>2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<p id="p4" class="mppp">3. 通过class设置样式</p>

<script>
    let p1 = document.getElementById("p1");//获取段落标签
    let p2 = document.getElementById("p2");//获取段落标签
    let p3 = document.getElementById("p3");//获取段落标签
    let p4 = document.getElementById("p4");//获取段落标签

    // 1. 设置一个css样式
    //方法1：样式一个个设置（行内样式）
    p1.style.fontSize = "40px";
    p1.style.color ="green";
    //方法2：可以一次性设置多个样式：（行内样式）
    p1.style.cssText = "font-size:60px;color:blue"
    //方法3：(class设置样式）（选择器）（注意优先级：行内大于内部大于外部，id选择器大于class大于标签）
    p2.className = "mppp";

    // 2. 批量设置css样式

    // 3. 通过class设置样式

</script>
</body>
</html>